<template>  
    <div class="container">   
      <div class="main">  
        <div class="header">  
            班次
          <el-button type="primary" @click="add">新建</el-button>   
          <el-input placeholder="请输入关键字搜索" v-model="searchTable" style="width: 200px;"/>  
          <el-button type="info" @click="query">查询</el-button>  
          <el-button type="info" @click="SX">重置</el-button>  
        </div>  
        <el-table :data="tableData" border class="eltable">  
          <el-table-column type="index" label="序号" width="80"></el-table-column>  
          <el-table-column label="状态">
            <template #default="{row}">
                <span v-if="row.ckb_shzt == 1">
                    {{zt.obj1}}
                </span>
                <span v-if="row.ckb_shzt == 2">
                    {{zt.obj2}}
                </span>
                <span v-if="row.ckb_shzt == 3">
                    {{zt.obj3}}
                </span>
            </template>
          </el-table-column>  
          <el-table-column prop="ckb_code" label="出库编号"></el-table-column>  
          <el-table-column prop="ckb_type" label="出库类型"></el-table-column>  
          <el-table-column prop="wldb_code" label="调拨编号" ></el-table-column>  
          <el-table-column prop="wldb_dblx" label="调拨类型" ></el-table-column>  
          <el-table-column prop="ckb_jhcksj" label="计划出库时间"></el-table-column>  
          <el-table-column prop="ck_name" label="出库仓库"></el-table-column>  
          <el-table-column prop="user_uname" label="负责人"></el-table-column>  
          <el-table-column label="操作" width="200">  
            <template #default="{ row }">  
                <el-button type="text" @click="xq(row)">详情</el-button>  
              <span v-if="row.ckb_shzt == 1">
                <el-button type="text" @click="sh(row)">审核</el-button>
              </span>
            </template>  
          </el-table-column>  
        </el-table>  
        <el-pagination  
          @current-change="handleCurrentChange"  
          :current-page="currentPage"  
          :page-size="pageSize"  
          :total="totalItems"  
          layout="total, prev, pager, next, jumper">  
        </el-pagination>  
      </div>  
    </div> 
    <!-- 详情 -->
    <el-dialog v-model="xqdialogVisible" title="详情" height="800">
      <el-form :model="xqform" :inline="true" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出库类型">
              <el-input v-model="xqform.ckb_type" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调拨类型">
              <el-input v-model="xqform.wldb_dblx"  disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划出库时间">
              <el-input v-model="xqform.ckb_jhcksj"  disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出库仓库">
              <el-input v-model="xqform.ck_name"  disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="xqtableData" border class="eltable">  
        <el-table-column prop="ckxx_id" label="序号" width="100"></el-table-column>
        <el-table-column prop="ckxx_code" label="出库详细编码" width="200"></el-table-column>   
        <el-table-column prop="ckxx_wlmc" label="物料名称" ></el-table-column>   
          <el-table-column prop="ckxx_wlfl" label="物料分类" ></el-table-column>  
          <el-table-column prop="ckxx_ggxh" label="规格型号" ></el-table-column>  
          <el-table-column prop="ckxx_cksl" label="出库数量" ></el-table-column>   
        </el-table>  
      <span slot="footer" class="dialog-footer">
        <el-button @click="xqdialogVisible = false">取 消</el-button>
      </span>
    </el-dialog> 
    <!-- 审核 -->
    <el-dialog v-model="shdialogVisible" title="详情" height="800">
      <div class="mb-2 ml-4">
        <el-radio-group v-model="radio">
          <el-radio value="1" size="large">通过</el-radio>
          <el-radio value="2" size="large">撤销</el-radio>
        </el-radio-group>
      </div>
      <el-form :model="shform" :inline="true" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出库类型">
              <el-input v-model="shform.ckb_type"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="调拨类型">
              <el-input v-model="shform.wldb_dblx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计划出库时间">
              <el-input v-model="shform.ckb_jhcksj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="出库仓库">
              <el-input v-model="shform.ck_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人">
                <el-select 
                v-model="shform.fzr" 
                placeholder="选择负责人" 
                style="width: 200px"
                @change="handleLeaderChange"
              >
                <el-option
                  v-for="item in usertableData"
                  :key="item.user_id"
                  :label="item.user_uname"
                  :value="item.user_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="xqtableData" border class="eltable">  
        <el-table-column prop="ckxx_id" label="序号" width="100"></el-table-column>
        <el-table-column prop="ckxx_code" label="出库详细编码" width="200"></el-table-column>   
        <el-table-column prop="ckxx_wlmc" label="物料名称" ></el-table-column>   
          <el-table-column prop="ckxx_wlfl" label="物料分类" ></el-table-column>  
          <el-table-column prop="ckxx_ggxh" label="规格型号" ></el-table-column>  
          <el-table-column prop="ckxx_cksl" label="出库数量" ></el-table-column>   
        </el-table>  
      <span slot="footer" class="dialog-footer">
        <el-button @click="shdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="shqr">确 定</el-button>
      </span>
    </el-dialog>
  </template>  
  
  <script>  
    import { ref, reactive, router,computed } from 'vue';  
    import axios from 'axios'
    import { ElMessage, ElMessageBox } from 'element-plus';
  
  export default {  
    setup() {  
      const searchKey = ref('');  
      const treeData = ref([]); 
      const radio = ref('1') 
      const defaultProps = {  
        children: 'children',  
        label: 'label',  
      };  
      //获取登录角色数据
      const uid=computed(()=>{
        return sessionStorage.getItem('u');
      })
      let yhid=reactive({
        id:uid
      })
      const tableData = ref([]);  
      const xqtableData = ref([]);
      const usertableData = ref([]);
      const selectedFilter = ref('');  
      const searchTable = ref('');  
      const currentPage = ref(1);  
      const pageSize = ref(10);  
      const totalItems = ref(3); 
      let xqdialogVisible=ref(false);
      let shdialogVisible=ref(false);
      let zt=reactive({
        obj1:'待出库',
        obj2:'已出库',
        obj3:'已完成',
      }) 
      let xqform=reactive({
        ckb_id:'',
        ckb_shzt:'',
        ckb_code:'',
        ckb_type:'',
        wldb_code:'',
        wldb_dblx:'',
        ckb_jhcksj:'',
        ck_name:'',
        user_uname:'',
      })
      let shform=reactive({
        ckb_id:'',
        ckb_shzt:'',
        ckb_code:'',
        ckb_type:'',
        wldb_code:'',
        wldb_dblx:'',
        ckb_jhcksj:'',
        ck_name:'',
        fzr:'',
        rkw_code:'',
        uid:yhid.id
      })
      const query = () => {  
        // 查询逻辑  
        console.log('Querying with:', searchTable.value);  
      };  
      async function SX(){
        const response = await axios.get('/api/WMS_CKB/GetCXWMS_CKB?PageNumber='+currentPage.value+'&PageSize='+pageSize.value)
        tableData.value=response.data.cXWMS_CKBs
        totalItems.value=response.data.zon
        console.log(response.data)
      }
      SX()
      const handleCurrentChange = (page) => {  
        currentPage.value = page;  
        SX()
        // 分页逻辑  
        console.log('Current page:', page);  
      };  
      async function xq(row){
        xqform.ckb_id=row.ckb_id
        xqform.ckb_shzt=row.ckb_shzt
        xqform.ckb_code=row.ckb_code
        xqform.ckb_type=row.ckb_type
        xqform.wldb_code=row.wldb_code
        xqform.wldb_dblx=row.wldb_dblx
        xqform.ckb_jhcksj=formatDate(row.ckb_jhcksj)
        xqform.ck_name=row.ck_name
        xqdialogVisible.value=true
        const response = await axios.get('/api/WMS_CKXX/GetWMXX_CK?code='+row.ckb_code)
        xqtableData.value=response.data
      }
      async function sh(row){
        shdialogVisible.value=true
        shform.ckb_id=row.ckb_id
        shform.ckb_shzt=row.ckb_shzt
        shform.ckb_code=row.ckb_code
        shform.ckb_type=row.ckb_type
        shform.wldb_code=row.wldb_code
        shform.wldb_dblx=row.wldb_dblx
        shform.ckb_jhcksj=formatDate(row.ckb_jhcksj)
        shform.ck_name=row.ck_name
        shform.user_uname=row.user_uname
        shform.rkw_code=row.rkw_code
        const response = await axios.get('/api/WMS_CKXX/GetWMXX_CK?code='+row.ckb_code)
        xqtableData.value=response.data
        const response1 = await axios.get('/api/User/GetUser')
        usertableData.value=response1.data
      }
      async function shqr(){
        if(radio.value=='1'){
          try {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
            const day = String(now.getDate()).padStart(2, '0'); // 补零
      
            // 生成四位随机数
            const randomNumber = Math.floor(1000 + Math.random() * 9000); // 生成1000到9999之间的随机数
      
            // 拼接时间字符串和随机数
            const formattedTime = `${year}${month}${day}`;
            let id=`rk${formattedTime}${randomNumber}`;
            const response = await axios.post('/api/WMS_RK/PostWMS_RK',{
              rk_code:id,
              ck_code:shform.rkw_code,
              rk_type:'调拨入库',
              rk_fzr:yhid.id,
              rk_jhrksj:shform.ckb_jhcksj,
              create_by:yhid.id
            })
            if(response.data){
              const response = await axios.put('/api/WLDB/Updatewldbrk?code='+shform.wldb_code+'&rk_code='+id);
              if(response.data){
                const response = await axios.put('/api/WMS_CKB/UpdateWMS_CK?fzr='+shform.fzr+'&uid='+shform.uid+'&code='+shform.ckb_code+'&zt=2')
                if(response.data){
                  for(const team of xqtableData.value){
                    const response = await axios.post('/api/WMS_RKXX/PostWMS_RKXX',{
                      rk_code:id,
                      wl_code:team.wl_code,
                      rkxx_wlmc:team.ckxx_wlmc,
                      rkxx_wlfl:team.ckxx_wlfl,
                      rkxx_ggxh:team.ckxx_ggxh,
                      rkxx_rksl:team.ckxx_cksl,
                      kc_code:team.kc_code
                    })
                    if(response.data){
                      const response =await axios.put('/api/WMS_KC/UpdateWMS_KCSL?code='+team.kc_code+'&sl='+team.ckxx_cksl);
                    }
                  }
                }
                ElMessage.success("成功")
                SX()
                shdialogVisible.value=false
              }
            }
          } catch (error) {
            console.error("请求错误:", error);
             ElMessage.error("服务器错误，请稍后重试。");
          }
        }
        else{
          try {
            const response = await axios.put('/api/WMS_CKB/UpdateWMS_CK?fzr='+shform.fzr+'&uid='+shform.uid+'&code='+shform.ckb_code+'&zt=3')
            if(response.data){
              const response = await axios.put('/api/WLDB/Updatewldbzt?state=1&code='+shform.wldb_code+'&ckb_code='+'');
              if(response.data){
                ElMessage.success("成功")
                SX();
                shdialogVisible.value=false
              }
            }
          } catch (error) {
            console.error("请求错误:", error);
             ElMessage.error("服务器错误，请稍后重试。");
          }
        }
      }
      const formatDate = (dateString) => {
        if (!dateString) return '';
        const date = new Date(dateString);
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
      };
      // 确保所有函数都被返回  
      return {  
        searchKey,  
        treeData,  
        defaultProps,  
        tableData,  
        selectedFilter,  
        searchTable,  
        currentPage,  
        pageSize,  
        totalItems,   
        query,  
        handleCurrentChange, 
        zt,
        xqform,
        xq,
        xqdialogVisible,
        xqtableData,
        sh,
        shdialogVisible,
        shform,
        radio,
        shqr,
        usertableData,
        SX
      };  
    },  
  };  
  </script>  
  
  <style>  
.container {  
  display: flex;  
  gap: 20px;
  height: 95%;
}  

.sidebar {  
  height: 100%;
  
}  

.main {  
  width: 80%;
  flex: 1;  
  height: 100%;
}  

.header {  
   display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}  
.eltable{
  height: 95%;
  font-size: 80%;
}
.letree{
  height: 100%;
}
</style>